<template>
    <div id="main">
        <div id="percentage" :style="'width:'+ ptTemp*100 +'%'" >
            <span class="temp1">{{ptTemp*100 +'%'}}</span>
        </div>
        <span class="temp"></span>
    </div>
</template>

<script type="text/javascript">
    export default {
        name :'progress',
        props :['pt'],
        data(){
            return {
                ptTemp :this.$props.pt
            }
        }
    }
</script>

<style scoped="true" type="text/css">
    #main{
      width: 100%;
      background-color: #bfbfbf;
      height:20px;
      overflow: hidden;
    }
    #percentage{
      background-color: #5b9bd5;
      height: 100%;
      width: 0;
      display: inline-block;
      float: left;
    }
    .temp{
        display: inline-block;
        width: 10px;
        height: 100%;
        background-color: #ed7d31;
        float: left;
    }
    .temp1{
        float:left;
        color:#fff;
        display: inline-block;
        line-height: 22px;
        margin-left: 5px;
    }
</style>
